<template>
  <div class="trademark">
    <div class="banner">
      <img src="@/assets/images/banner_trademark.jpg"/>
    </div>
    <div class="w1190">
      <div class="product product1">
        <div class="title">
          <h3>商标注册</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>商标注册</h4>
            <p>商业盈利<br/>助力品牌价值最大化</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in reg" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="product product2">
        <div class="title">
          <h3>商标复审</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>商标复审</h4>
            <p>对裁定书存在异议时<br/>挽回商标的唯一途径</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in fs" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="product product3">
        <div class="title">
          <h3>商标答辩</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="channel">
          <div class="list_head">
            <h4>商标答辩</h4>
            <p>维护自身正当权益<br/>争取商标权的有效途径</p>
          </div>
          <div class="list_box">
            <div v-for="(item,index) in db" v-if="index < 4" :key="item.id" class="box" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <h4>{{item.name}}</h4>
              <div class="line"></div>
              <p>{{item.describe}}</p>
<!--              <div v-if="item.price != 0" class="price">￥{{item.price}}</div>-->
<!--              <a v-else @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>-->
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
              <img :src="item.image">
            </div>
          </div>
        </div>
      </div>
      <div class="other">
        <div class="title">
          <h3>商标其他</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="list">
          <div class="single">
            <div class="img">
              <img src="@/assets/images/img_other1.jpg"/>
            </div>
            <div class="txt">
              <h4>商标续展申请</h4>
              <h5>商标有效期为十年，到期前一年可对商标申请续展。</h5>
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
            </div>
          </div>
          <div class="single">
            <div class="img">
              <img src="@/assets/images/img_other2.jpg"/>
            </div>
            <div class="txt">
              <h4>商标宽展申请</h4>
              <h5>商标注册满十年内未办理续展，过期半年以内申请宽展。</h5>
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
            </div>
          </div>
          <div class="single">
            <div class="img">
              <img src="@/assets/images/img_other3.jpg"/>
            </div>
            <div class="txt">
              <h4>商标异议申请</h4>
              <h5>初审公告后3个月以内可以对他人商标提出异议申请。</h5>
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
            </div>
          </div>
          <div class="single">
            <div class="img">
              <img src="@/assets/images/img_other4.jpg"/>
            </div>
            <div class="txt">
              <h4>商标撤销连续三年不使用申请</h4>
              <h5>注册申请满三年的商标，他人可以提出撤销连续三年不使用注册商标申请。</h5>
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
            </div>
          </div>
          <div class="single">
            <div class="img">
              <img src="@/assets/images/img_other5.jpg"/>
            </div>
            <div class="txt">
              <h4>商标无效宣告申请</h4>
              <h5>对于已经注册成功的商标，五年内可以提出无效宣告申请。</h5>
              <a @click="onSwt">立即咨询<i class="icon icon-right2"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="change">
        <div class="title">
          <h3>商标变更</h3>
          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
        </div>
        <div class="list">
          <div class="small red">
            <h3>商标变更</h3>
            <div class="line"></div>
            <p>商标信息有变化<br/>及时变更避免纠纷</p>
          </div>
          <div class="big yellow">
            <h3>商标申请人/注册人名义变更</h3>
            <p>用于申请人/注册人注册名义发生变化，向商标局提出主体名下的商标变更申请。</p>
            <a @click="onSwt">立即咨询</a>
          </div>
          <div class="big blue">
            <h3>商标申请人/注册人地址变更</h3>
            <p>用于申请人/注册人注册地址发生变化，向商标局提出主体名下的商标变更申请。</p>
            <a @click="onSwt">立即咨询</a>
          </div>
        </div>
      </div>
<!--      <div class="trade">-->
<!--        <div class="title">-->
<!--          <h3>商标交易</h3>-->
<!--          <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>-->
<!--        </div>-->
<!--        <div class="trade_box">-->
<!--          <h4>热门行业</h4>-->
<!--          <div class="trade_main">-->
<!--            <a-tabs class="tabs" default-active-key="1">-->
<!--              <a-tab-pane key="1">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-25"></i>服装鞋帽<em>（25类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="2">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-33"></i>酒商标<em>（33类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="3">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-29"></i>食品商标<em>（29类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="4">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-05"></i>医药商标<em>（05类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="5">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-30"></i>方便食品<em>（30类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="6">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-09"></i>科学仪器<em>（09类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="7">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-03"></i>日化用品<em>（03类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="8">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-43"></i>餐饮住宿<em>（43类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="9">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-35"></i>广告销售<em>（35类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="10">-->
<!--                <div slot="tab" class="tab_item">-->
<!--                  <i class="icon  icon-28"></i>健身器材<em>（28类）</em>-->
<!--                </div>-->
<!--              </a-tab-pane>-->
<!--            </a-tabs>-->
<!--            <div class="list">-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--              <a @click="onSwt"><img src="@/assets/images/img_trade.gif"/></a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <special-list></special-list>
      <div class="news">
        <div class="box">
          <div class="box_tit">
            <h4>商标注册查询</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news7.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">餐具类产品商标品牌注册前需要做什么？</a>
              <a @click="onSwt">坚果类商标注册时怎么做查询？</a>
              <a @click="onSwt">芝麻糊类商标品牌注册申请前都需要做什么？</a>
              <a @click="onSwt">洗面奶类商标注册申请前怎么做查询操作？</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>商标注册代理</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news8.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">商标注册代理在商标注册流程中起到什么作用?</a>
              <a @click="onSwt">油漆类商标注册时需要怎么操作呢？</a>
              <a @click="onSwt">燕窝类商标品牌一般需要怎么注册呢？</a>
              <a @click="onSwt">电器类商标注册为什么还要注册维修类分类呢？</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>商标注册流程</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news9.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">卫生纸类商标品牌如何申请注册呢?</a>
              <a @click="onSwt">金融理财类商标品牌是怎么申请注册呢？</a>
              <a @click="onSwt">牛奶类商标品牌是怎么申请注册的？</a>
              <a @click="onSwt">白酒类商标注册时需要怎么操作？</a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box_tit">
            <h4>商标注册费用</h4>
            <a @click="onSwt">查看更多<i class="icon icon-round-right"></i></a>
          </div>
          <div class="box_list">
            <div class="img">
              <img src="@/assets/images/img_news10.jpg"/>
            </div>
            <div class="list">
              <a @click="onSwt">为什么代理做商标注册费用要高呢？</a>
              <a @click="onSwt">美容院类商标注册时那些费用是可以节省的？</a>
              <a @click="onSwt">注册商标时什么因素影响了商标申请人的花费？</a>
              <a @click="onSwt">酱肉类商标品牌是怎么申请的？</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import apis from '@/api'
  import SpecialList from './components/SpecialList'
  import { getProductByCategory } from '@/api/product'

  export default {
    components: {
      SpecialList
    },
    name: 'Trademark',
    data () {
      return {
        id: 0,
        reg: [],
        fs: [],
        db: []
      }
    },
    created () {
      this.id = 1
      this.getTm(this.id)
    },
    methods: {
      getTm (id) {
        getProductByCategory(id).then(res => {
          this.reg = res.result.data[0].data
          this.fs = res.result.data[1].data
          this.db = res.result.data[2].data
        })
      },
      onSwt () {
        window.open(apis.Swt)
      }
    }
  }
</script>

<style scoped>
  h3, h4, h5, p, a, li, ul, div, span {margin: 0;padding: 0;font-weight: 500;}
  @font-face {
    font-family: "icomoon";
    src: url("../../assets/fonts/icomoon.eot");
    src: url("../../assets/fonts/icomoon.eot") format("embedded-opentype"), url("../../assets/fonts/icomoon.woff") format("woff"), url("../../assets/fonts/icomoon.ttf") format("truetype"), url("../../assets/fonts/icomoon.svg") format("svg")
  }
  [class^="icon-"],[class*=" icon-"] {font-family: icomoon;font-size: 16px;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased}
  [class^="icon-"]:before,[class*=" icon-"]:before {text-decoration: inherit;display: inline-block;speak: none}
  .icon-right2:before {content: "\e641"}
  .icon-round-right:before {content: "\e642"}
  .icon-25:before {content: "\e637";}
  .icon-33:before {content: "\e639";}
  .icon-29:before {content: "\e63d";}
  .icon-05:before {content: "\e63f";}
  .icon-30:before {content: "\e638";}
  .icon-09:before {content: "\e63b";}
  .icon-03:before {content: "\e63e";}
  .icon-43:before {content: "\e636";}
  .icon-35:before {content: "\e63c";}
  .icon-28:before {content: "\e63a";}
  .w1190{width: 1190px;margin: 0 auto;}
  .trademark{margin-top: -20px;background-color: #ffffff;padding-bottom: 60px;}
  .banner{font-size: 0;}
  .banner img{width: 100%;}
  .title{display: flex;align-items: center;justify-content: space-between;padding: 55px 0 20px 0;}
  .title h3{font-weight: 700;font-size: 30px;color: #333333;}
  .title a{display: flex;align-items: center;font-size: 14px;color: #333333;}
  .title a:hover{color: #f52930;}
  .title a i{margin-left: 5px;font-size: 17px;width: 17px;height: 17px;line-height: 17px;color: #e52e3a;}
  .channel{display: flex;background-color: #f7f7f7;padding-right: 12px;}
  .channel .list_head{width: 230px;height: 320px;padding: 45px 0 0 25px;margin-right: 18px;}
  .product1 .channel .list_head{background: url("../../assets/images/bg_trademark1.jpg")no-repeat center;}
  .product2 .channel .list_head{background: url("../../assets/images/bg_trademark2.jpg")no-repeat center;}
  .product3 .channel .list_head{background: url("../../assets/images/bg_trademark3.jpg")no-repeat center;}
  .channel .list_head h4{font-size: 24px;color: #ffffff;font-weight: 700;position: relative;padding-bottom: 12px;}
  .channel .list_head h4:before{position: absolute;content: '';left: 0;bottom: 0;width: 40px;height: 2px;background-color: #ffffff;}
  .channel .list_head p{font-size: 14px;color: #ffffff;margin-top: 14px;line-height: 16px;}
  .channel .list_box{display: flex;}
  .channel .list_box .box{width: 225px;height: 300px;padding: 34px 0 0 24px;background-color: #ffffff;margin: 10px 10px 0 0;transition: all 0.2s ease-in;}
  .channel .list_box .box:hover{transform: translateY(-4px);}
  .channel .list_box .box h4{height: 48px;font-size: 22px;line-height: 24px;width: 180px;color: #333333;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
  .channel .list_box .box .line{width: 30px;margin-top: 8px;border-top: 1px dashed #e4e4e4;}
  .channel .list_box .box p{margin: 10px 0;font-size: 14px;color: #999;padding-right: 28px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
  .channel .list_box .box .price{color: #ff2f32;font-size: 20px;font-weight: 700;line-height: 24px;}
  .channel .list_box .box a{color: #ff2f32;font-size: 16px;display: flex;align-items: center;height: 24px;}
  .channel .list-box .advisory .icon,.channel .list-box-long .advisory .icon,.channel .list-box-long-advisory .advisory .icon,.channel .list-box-advisory .advisory .icon {font-size: 18px;margin-left: 2px;color: inherit;vertical-align: text-bottom;}
  .channel .list_box .box img{width: 90px;height: 90px;margin-top: 32px;margin-left: 86px;}
  .other .list{display: flex;flex-flow: row wrap;}
  .other .list .single{width: 230px;height: 320px;margin-left: 10px;}
  .other .list .single:first-child{margin-left: 0;}
  .other .list .single .img{width: 230px;height: 160px;}
  .other .list .single .img img{display: block;width: 100%;height: 100%;}
  .other .list .single .txt{height: 160px;width: 230px;background-color: #f7f7f7;transition: all .2s ease-in;padding-top: 25px;}
  .other .list .single .txt:hover{transform: translateY(-4px);}
  .other .list .single .txt h4{text-align: center;height: 48px;line-height: 24px;font-size: 22px;width: 190px;margin: 0 auto;padding: 0;color: #333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
  .other .list .single .txt h5{width: 187px;font-size: 14px;line-height: 1;margin: 12px auto 0;color: #999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  .other .list .single .txt a{text-align: center;display: block;cursor: pointer;position: relative;margin: 16px auto 0;font-size: 16px;z-index: 9;color: #ff2f32;}
  .change .list{display: flex;flex-flow: row wrap;}
  .change .list .small{box-sizing: border-box;float: left;position: relative;width: 230px;height: 157px;padding-top: 32px;padding-left: 20px;}
  .change .list .big{box-sizing: border-box;float: left;position: relative;width: 470px;height: 157px;padding-top: 25px;padding-left: 56px;}
  .change .list .red{margin-right: 10px;background: url("../../assets/images/bg_change1.jpg") no-repeat center;}
  .change .list .yellow{margin-right: 10px;background: url("../../assets/images/bg_change2.jpg") no-repeat center;}
  .change .list .blue{background: url("../../assets/images/bg_change3.jpg") no-repeat center;}
  .change .list .small h3{font-weight: bold;font-size: 20px;color: #fff;}
  .change .list .small .line{width: 37px;height: 2px;margin-top: 14px;margin-bottom: 8px;background-color: #fff;opacity: .6;}
  .change .list .small p{font-size: 14px;line-height: 20px;width: 160px;color: #fff;}
  .change .list .big h3{font-weight: bold;font-size: 16px;color: #fff;}
  .change .list .big p{font-size: 12px;line-height: 18px;width: 240px;color: #fff;margin-top: 4px;}
  .change .list .big a{display: block;position: absolute;text-align: center;cursor: pointer;width: 84px;height: 28px;line-height: 28px;bottom: 26px;font-size: 14px;border-radius: 2px;z-index: 6;background-color: #fff;color: #ff2f32;}
  .trade{}
  .trade .trade_box{width: 100%;padding: 20px 20px 0;box-sizing: border-box;}
  .trade .trade_main{width: 100%;height: 215px;overflow: hidden;display: flex;}
  .trade .trade_main .tabs{width: 380px;display: flex;align-items: center;flex-flow: row wrap;}
  .trade .trade_main .tabs .tab_item {width: 180px;height: 35px;margin-right: 10px;margin-bottom: 10px;padding-left: 13px;box-sizing: border-box;border: 1px solid #eee;font-size: 16px;color: #333;cursor: pointer;}
  /deep/.trade .trade_main .tabs .ant-tabs-nav .ant-tabs-tab-active .tab_item,.trade .trade_main .tabs .ant-tabs-nav .ant-tabs-tab-active .tab_item .icon{color: #ffffff;border-color: #e52e3a;background-color: #e52e3a;}
  /deep/.ant-tabs-nav .ant-tabs-tab-active{text-shadow: none;color: #ffffff;}
  /deep/.ant-tabs-ink-bar{background-color: #ffffff;}
  /deep/.ant-tabs-nav .ant-tabs-tab{margin: 0;padding: 0;}
  /deep/.ant-tabs-bar{border: none;}
  /deep/.ant-tabs-nav>div{display: flex;flex-flow: row wrap;}
  .trade .trade_main .tabs .tab_item:hover,  .trade .trade_main .tabs .tab_item:hover i{background-color: #e52e3a;color: white;border-color: #e52e3a;}
  .trade .trade_main .tabs .tab_item .icon {margin-right: 4px;font-size: 30px;line-height: 35px;color: #666;vertical-align: middle;}
  .trade .trade_main .tabs .tab_item em {font-size: 12px;font-style: normal;}
  .trade .trade_main .list{display: flex;flex-flow: row wrap;width: 761px;border: 1px solid #eee;border-right: 0 none;border-bottom: 0 none;margin-left: 9px;box-sizing: border-box;overflow: hidden;}
  .trade .trade_main .list a{width: 151px;border-right: 1px solid #eee;border-bottom: 1px solid #eee;height: 106px;line-height: 106px;text-align: center;}
  .trade .trade_main .list a img{display: inline-block;vertical-align: top;max-width: 150px;max-height: 105px;}
  .trade h4{font-size: 18px;line-height: 30px;color: #333;padding-bottom: 11px;}
  .news{display: flex;flex-flow: row wrap;}
  .news .box{width: 570px;margin-right: 40px;}
  .news .box:nth-child(2n){margin-right: 0;}
  .news .box .box_tit{display: flex;align-items: center;justify-content: space-between;padding: 55px 0 20px 0;}
  .news .box .box_tit h4{font-size: 24px;color: #333;}
  .news .box .box_tit a{display: flex;align-items: center;font-size: 14px;color: #333333;}
  .news .box .box_tit a:hover{color: #f52930;}
  .news .box .box_tit a i{margin-left: 5px;color: #f52930;}
  .news .box .box_list{display: flex;}
  .news .box .box_list .img{width: 230px;height: 160px;}
  .news .box .box_list .img img{display: inline-block;width: 100%;height: 100%;}
  .news .box .box_list .list{width: 340px;padding: 8px 0 0 20px;overflow: hidden;box-sizing: border-box;}
  .news .box .box_list .list a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-left: 10px;position: relative;font-size: 14px;line-height: 36px;color: #333;display: block;}
  .news .box .box_list .list a:before{position: absolute;content: '';left: 0;top: 16px;width: 3px;height: 3px;background-color: #cccccc;}
  .news .box .box_list .list a:hover{color: #f52930;}
</style>
